<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认Tab</dt>
    <dd class="pb20 d-f gap20">
      <t-tabs v-model="tabsActive1">
        <t-tabs-item>
          <div class="h200">11111111111</div>
        </t-tabs-item>
        <t-tabs-item>
          <div class="h200">222222222222</div>
        </t-tabs-item>
        <t-tabs-item>
          <div class="h200">333333333333</div>
        </t-tabs-item>
        <t-tabs-item>
          <div class="h200">444444444444</div>
        </t-tabs-item>
      </t-tabs>
    </dd>
    <dd class="mt20">
      <pre v-highlight="tabs1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">title tabs</dt>
    <dd class="pb20 d-f gap20">
      <t-tabs v-model="tabsActive2">
        <template #title>
          <t-tabs-title>第一</t-tabs-title>
          <t-tabs-title>第二</t-tabs-title>
          <t-tabs-title>第三</t-tabs-title>
          <t-tabs-title>第四</t-tabs-title>
        </template>
        <t-tabs-item>
          <div class="h200">11111111111</div>
        </t-tabs-item>
        <t-tabs-item>
          <div class="h200">222222222222</div>
        </t-tabs-item>
        <t-tabs-item>
          <div class="h200">333333333333</div>
        </t-tabs-item>
        <t-tabs-item>
          <div class="h200">444444444444</div>
        </t-tabs-item>
      </t-tabs>
    </dd>
    <dd class="mt20">
      <pre v-highlight="tabs2"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tabsActive1 = ref<number>(8)
const tabsActive2 = ref<number>(8)

const tabs1 = `<t-tabs v-model="tabsActive">
  <t-tabs-item>
    <div class="h200">11111111111</div>
  </t-tabs-item>
  <t-tabs-item>
    <div class="h200">222222222222</div>
  </t-tabs-item>
  <t-tabs-item>
    <div class="h200">333333333333</div>
  </t-tabs-item>
  <t-tabs-item>
    <div class="h200">444444444444</div>
  </t-tabs-item>
</t-tabs>`
const tabs2 = `<t-tabs v-model="tabsActive2">
  <template #title>
    <t-tabs-title>第一</t-tabs-title>
    <t-tabs-title>第二</t-tabs-title>
    <t-tabs-title>第三</t-tabs-title>
    <t-tabs-title>第四</t-tabs-title>
  </template>
  <t-tabs-item>
    <div class="h200">11111111111</div>
  </t-tabs-item>
  <t-tabs-item>
    <div class="h200">222222222222</div>
  </t-tabs-item>
  <t-tabs-item>
    <div class="h200">333333333333</div>
  </t-tabs-item>
  <t-tabs-item>
    <div class="h200">444444444444</div>
  </t-tabs-item>
</t-tabs>`
</script>

<style scoped lang="scss">

</style>

